import ProList from '@ant-design/pro-list';
import { Button, Form, Input, Space } from 'antd';
import { useEffect, useState } from 'react';
import { useParams } from 'umi';
const data: any[] = [
  {
    id: '1',
    name: '1',
    content: '123',
    editable: true,
  },
  {
    id: '3',
    name: '3',
    content: '323',
    editable: false,
  },
];

const Render = ({
  record,
  handleDel,
  handleEdit,
}: {
  record: any;
  handleDel: (id: string) => void;
  handleEdit: (values: any) => void;
}) => {
  const [form] = Form.useForm();

  const edit = async () => {
    const values = await form.validateFields();
    handleEdit(values);
  };

  return (
    <Space>
      {record.editable && (
        <Form
          layout="inline"
          form={form}
          initialValues={{ content: record.content }}
        >
          <Form.Item name="content" label="修改内容">
            <Input />
          </Form.Item>
        </Form>
      )}
      {record.editable && <a onClick={edit}>修改</a>}
      <a onClick={() => handleDel(record.id)}>删除</a>
    </Space>
  );
};

export default () => {
  const params = useParams<{ id: string }>();
  const [dataSource, setDataSource] = useState<any[]>();

  useEffect(() => {
    getData();
  }, []);

  const getData = async (values?: any) => {
    if (values) {
      setDataSource([...data, values]);
    } else {
      setDataSource(data);
    }
  };

  const handleDel = async (id: string) => {
    console.log(id);
  };

  const handleEdit = async (values: any) => {
    console.log(values);
  };

  return (
    <div style={{ display: 'flex', height: '100%' }}>
      <div
        style={{
          width: '100%',
          height: '100%',
          marginRight: '8px',
          background: '#fff',
        }}
      >
        <ProList
          defaultSize="small"
          rowKey="id"
          headerTitle="科目列表"
          dataSource={dataSource}
          showActions="always"
          metas={{
            title: {
              dataIndex: 'name',
            },
            actions: {
              render: (_, record) => (
                <Render
                  handleDel={handleDel}
                  handleEdit={handleEdit}
                  record={record}
                />
              ),
            },
          }}
        />
      </div>
    </div>
  );
};
